<template>
	<el-dialog  :title="userData2.name" :visible="showDialog" @update:visible="updateShowDialog" @close="beforeClose"
		top="10vh" width="650px">
		<el-form :model="userData2">

			<!-- 设置皮肤 -->
			<el-form-item prop="skin" :ref="diyuserRef" label="设置皮肤">
				<!-- <el-select clearable v-model="bgtype" placeholder="设置皮肤">
					<el-option v-for="(item,index) in selectimg.bgimg" :key="index" :label="item.name" :value="item.id"></el-option>
				</el-select> -->
				<el-radio-group v-model="bgtype">
					<!--  <el-radio-button style="background: red;" v-for="(item,index) in selectimg.bgimg" :key="index" >
						 <div style="width: 100%;height: 100%;background: rebeccapurple;"></div>
					  </el-radio-button> -->
					<el-radio @change="changeradio(item,index)" :style="{'background-image': 'url('+item.bgtype+')'}"
						v-for="(item,index) in selectimg.bgimg" :key="index" :label="item.name" border>
						{{item.name}}
					</el-radio>
				</el-radio-group>
			</el-form-item>

			<!-- 设置价格颜色 -->
			<el-form-item label="设置价格颜色"
				style="margin-bottom: 0;width: 50%;display: flex;flex-direction: column;align-items: flex-start;">
				<el-color-picker v-model="userData2.amountcolor" show-alpha></el-color-picker>
				<!-- 	<el-input type="color" clearable v-model="userData.amountcolor" placeholder="设置价格颜色" /> -->
			</el-form-item>

			<!-- 设置角标 -->
			<el-form-item prop="sub" label="设置角标" style="margin-bottom: 0;">
				<el-select v-model="classtype" placeholder="设置角标">
					<el-option v-for="(item,index) in subArr" :key="index" :label="item.label"
						:value="item.value"></el-option>
				</el-select>
			</el-form-item>

			<div v-if="classtype==1" style="border: 1px solid #e5e5e5;padding: 10px;display: flex;">
				<el-form-item v-if="classtype==1" prop="subText" label="角标自定义文本" style="margin-bottom: 0;width: 50%;">
					<el-input clearable v-model="userData2.classtext" placeholder="角标自定义文本" />
				</el-form-item>
				<!-- <el-form-item v-if="classtype==1" prop="subText" label="角标文本颜色"
					style="margin-bottom: 0;width: 50%;display: flex;flex-direction: column;align-items: center;">
					<el-color-picker v-model="userData2.classcolor" show-alpha></el-color-picker>
				</el-form-item>
				<el-form-item v-if="classtype==1" prop="subText" label="角标背景颜色"
					style="margin-bottom: 0;width: 50%;display: flex;flex-direction: column;align-items: center;">
					<el-color-picker v-model="userData2.classbgc" show-alpha></el-color-picker>
					
				</el-form-item> -->

			</div>


			<!-- 多送 -->
		<!-- 	<el-form-item v-if="userData2.type==1" prop="sub" label="设置多送样式" style="margin-bottom: 0;margin-top: 20px;">
			</el-form-item>
			<div v-if="userData2.type==1 " style="border: 1px solid #e5e5e5;padding: 10px;display: flex;">
				<el-form-item prop="subText" label="设置多送字体颜色"
					style="margin-bottom: 0;width: 50%;display: flex;flex-direction: column;align-items: center;">
					<el-color-picker v-model="userData2.giftcolor" show-alpha></el-color-picker>
				</el-form-item>
				<el-form-item prop="subText" label="设置多送背景颜色"
					style="margin-bottom: 0;width: 50%;display: flex;flex-direction: column;align-items: center;">
					<el-color-picker v-model="userData2.giftbgc" show-alpha></el-color-picker>
				</el-form-item>
			</div> -->


			<!-- 底部文本 -->
			<el-form-item v-if="userData2.type!==1" label="设置底部文本" style="margin-bottom: 0;margin-top: 20px;">
				<!-- <el-select v-model="foottype" placeholder="设置底部文本">
					<el-option v-for="(item,index) in subArr3" :key="index" :label="item.label" :value="item.value"></el-option>
				</el-select> -->
			</el-form-item>


			<div v-if="userData2.type!==1" style="border: 1px solid #e5e5e5;padding: 10px;display: flex;">
				<el-form-item v-if="userData2.type!==1" prop="subText" label="自定义底部文本">
					<el-input clearable v-model="userData2.foottext" placeholder="自定义底部文本" />
				</el-form-item>

			<!-- 	<el-form-item prop="subText" label="底部字体颜色"
					style="width: 50%;display: flex;flex-direction: column;align-items: center;">
					<el-color-picker v-model="userData2.footcolor" show-alpha></el-color-picker>
				</el-form-item> -->
				<!-- 	<el-form-item   label="底部图标" style="width: 50%;display: flex;flex-direction: column;align-items: flex-start;">
		
					  <el-radio-group v-model="footicon" style="display: flex;padding: 8px 0;">
						<el-radio v-if="footicon != 0" label='0' style="display: flex;align-items: center;">
							<div style="">不选</div>
						</el-radio>
					    <el-radio v-for="(item,index) in selectimg.coin" :key="index"  :label="item.id" style="display: flex;align-items: center;">
							<div style="width: 30px;height: 30px;background-position: center;background-size: cover;background-repeat: no-repeat;" :style="{'background-image': 'url('+item.cover+')'}"></div>
						</el-radio>
					  </el-radio-group>
				</el-form-item> -->

			</div>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="dCancel($event)">取 消</el-button>
			<el-button type="primary" @click="dSure($event)">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import {
		forEach
	} from 'lodash';

	export default {

		components: {

		},
		props: {
			title: String,
			selectimg: Object,
			showDialog: Boolean,
			diyuserRef: String,
			userData: Object,
		},
		data() {
			return {
				userData2: {},
				subArr: [{
						label: '不设置角标',
						value: 0
					},
					{
						label: '自定义文本',
						value: 1
					}
				],
				subArr2: [{
						label: '不设置多送',
						value: 0
					},
					{
						label: '设置多送样式',
						value: 1
					}
				],
				// bgtype2:0,
				bgtype: null,
				classtype: null,
				// gifttype:null,
				footicon: null,
				statusvalue: '',
				status: [{
						value: 0,
						label: '禁用',
					},
					{
						value: 1,
						label: '正常',
					}
				]
			};
		},
		created() {
			console.log(167)
		},
		mounted() {},
		computed: {},
		methods: {
			changeradio(item, index) {
				console.log(166, item)
				let userData = this.userData2
				userData.bgtype = item.bgtype
				userData.classcolor = item.classcolor
				userData.classbgc = item.classbgc
				userData.footcolor = item.footcolor
				userData.giftbgc = item.giftbgc
				userData.giftcolor = item.giftcolor
				userData.amountcolor = item.amountcolor

			
				console.log(168, userData)
			},
			init(v1, v2, v3,item) {
				console.log(170, v1, v2, v3)
				let that = this
				let bgimg = this.selectimg.bgimg
				bgimg.forEach(item => {
					if (item.id == v1) {
						that.bgtype = item.name;
					}
				})
				this.classtype = v2;
				this.gifttype = v3;
				// this.footicon =v4;
				this.userData2 = JSON.parse(JSON.stringify(item))

			},
			beforeClose() { // 右上角×号操作
				this.$emit("dCancel")
			},
			updateShowDialog(value) { //关闭
			
				this.$emit('update:showDialog', value);
			},
			dCancel() { //取消
		
				this.$emit("dCancel")

			},

			dSure(e) { // 确定
				let that = this;
				let diyuserRef = this.diyuserRef
				let userData = that.userData2
				let bgimg = this.selectimg.bgimg
				// let coin = this.selectimg.coin
				// let footicon = this.footicon
				let classtype = this.classtype
				if (classtype == 0) {
					userData.classtext = ''
				}
				if (this.bgtype == "") {
					userData.bgtype = bgimg[0].bgtype
				}
				if (this.gifttype == "") {
					userData.gifttype = bgimg[0].gifttype
				}
				// if(footicon==0){
				// 	userData.footicon =''
				// }
				console.log(173, this.bgtype)

				bgimg.forEach(item => {
					if (item.name == this.bgtype) {
						userData.bgtype = item.bgtype
						console.log(204)
					}

				})
				let userData2 = this.userData
				userData2.amount = userData.amount;
				userData2.amountcolor = userData.amountcolor
				userData2.bgtype = userData.bgtype
				userData2.classbgc = userData.classbgc
				userData2.classcolor = userData.classcolor
				userData2.classtext = userData.classtext
				userData2.day = userData.day
				userData2.footcolor = userData.footcolor
				userData2.footicon = userData.footicon
				userData2.foottext = userData.foottext
				userData2.giftbgc = userData.giftbgc
				userData2.giftcolor = userData.giftcolor
				userData2.gifttype = userData.gifttype
				userData2.give_coin = userData.give_coin
				userData2.id = userData.id
				userData2.name = userData.name
				userData2.status = userData.status
				userData2.type = userData.type
				userData2.value = userData.value	
				this.userData = userData2
			
				// coin.forEach(item=>{
				// 	if(item.id == this.footicon){
				// 		userData.footicon = item.cover
				// 		console.log(204)
				// 	}
				// })
				
				this.$emit("changeItem", userData)
				console.log(277, userData)


			}


		},
	};
</script>

<style>
	.el-select>.el-input {
		display: inline-block;
	}
</style>